<template>
    <div>
        <div class="imgBoxDiv" ref="elememt" v-cloak>
                <div class="nameBox focusDw">
                    <p class="fl pOne"  @click="homeLink(detailCon)">
                        <img :src="detailCon.imagePath?detailCon.imagePath:$defaultSetting.defaultPortrait" alt="">
                    </p>
                    <span class="fl nikeName">
                        <font class="provenance fontSize22 color717070"  @click="homeLink(detailCon)">
                        <em class="fl color000">{{detailCon.nickname}}</em>
                        <img class="fl" v-if="detailCon.certStatus == 1" src="../../assets/img/v.png" width="20" />
                        <em class="fl">{{detailCon.certName}}</em> 
                        </font>
                        <font class="provenanceTiem fontSize22"><em class="color5b5e5e">{{detailCon.createTime | dateServer}}</em></font>
                    </span>
                </div>
                <div class="focusContent fontSize28 " v-if="detailCon.pubType == 1 || detailCon.pubType == 3">
                    {{detailCon.content}}
                </div>
                <div class="focusContent fontSize28 " v-else>
                    {{detailCon.title}}
                </div>
                <div class="focusContent fontSize28 pubTypeThree" v-if="detailCon.pubType == 3">
                    <em>{{$stringMessage(detailCon.forwardContent)[0]}}</em>{{$stringMessage(detailCon.forwardContent)[1]}}
                </div>
                <div class="divImgOne" v-if="detailCon.contentImage && detailCon.contentImage.length == 1 && (detailCon.pubType == 1 || detailCon.pubType == 3)">
                    <p v-for="(imgItme,imgIndex) in detailCon.contentImage" :key="imgIndex" @click="imgbig(imgIndex,detailCon.contentImage)">
                        <img :src="imgItme" alt="">
                    </p>
                </div>
                <div class="focusImgBox" v-if="detailCon.contentImage && detailCon.contentImage.length == 2 && (detailCon.pubType == 1 || detailCon.pubType == 3)">
                    <p class="fl twop" v-for="(imgItme,imgIndex) in detailCon.contentImage" :key="imgIndex" :style="[imgIndex%3==0 ? '' : marginLeft,imgIndex>2 ? marginTop : '']" @click="imgbig(imgIndex,detailCon.contentImage)">
                        <img :src="$imgItmeFiler(imgItme)" alt="">
                    </p>
                </div>
                <div class="focusImgBox" v-if="detailCon.contentImage && detailCon.contentImage.length > 2 && (detailCon.pubType == 1 || detailCon.pubType == 3)">
                    <p class="fl threep" v-for="(imgItme,imgIndex) in detailCon.contentImage" :key="imgIndex" :style="[imgIndex%3==0 ? '' : marginLeft,imgIndex>2 ? marginTop : '']" @click="imgbig(imgIndex,detailCon.contentImage)">
                        <img :src="$imgItmeFiler(imgItme)" alt="">
                    </p>
                </div> 
                <div class="pubTypeTwo" v-if="detailCon.pubType == 2" @click="imgbig(1,detailCon.contentImage)">
                    <img :src="detailCon.contentImage" alt="">
                </div>
                <div class="focusContent fontSize28" v-if="detailCon.pubType == 2" v-html="$interceptionMessage(detailCon.content)">
                    <!-- {{detailCon.content}} -->
                </div>
                <div class="focusHe">
                    <div class="address fontSize26 color5b5e5e">
                        <img v-show="detailCon.addr != null" src="../../assets/img/address.png" class="fl" alt="">
                        <font class="reading" v-show="detailCon.addr != null">{{detailCon.addr}}</font>
                        <font>閱讀</font>
                        <font>{{detailCon.readCount}}</font>
                    </div>
                    <div class="chpl">
                        <span class="fl" @click.stop="forwarding(detailCon)"><img src="../../assets/img/xh2.png" alt="">{{detailCon.transpondCount}}</span>
                        <span class="fl" @click="popupKeyboard"><img src="../../assets/img/pl2.png" alt="">{{detailCon.comCount}}</span>
                        <span class="fl textR" @click.stop="addPraise(detailCon)">
                            <font class="fr">{{detailCon.praiseCount}}</font>
                            <img v-if="detailCon.exiPraise" src="../../assets/img/011.png" alt="">
                            <img v-else src="../../assets/img/022.png" alt="">
                        </span>
                    </div>
                </div>
                <div class="giveLike" v-show="userImageList.length>0 && detailCon.dynamicType == 2">
                    <div v-for="(imgItem,imgIndex) in userImageList" :key="imgIndex">
                        <img style="padding-right:.088rem" :style="[imgIndex>9 ? paddingTop : '']" class="fl" :src="imgItem.imagePath" alt="">
                    </div>
                </div>
                <div class="border-bottom-01" style="margin-top:.1rem;" v-show="detailCon.dynamicType != 2"></div>
                <div class="noComments" v-if="commentList.length == 0">暂无评论</div>
                <div class="friendDiv" v-for="(commItem,commIndex) in commentList" :key="commIndex">
                    <div class="nameBox focusDw fiendContent">
                        <p class="fl pOne pDetail">
                            <img :src="commItem.comtUserImagePath" alt="">
                        </p>
                        <p class="fl ptt">
                            <font class="provenance fontSize22 color717070">
                            <em class="fl color000">{{commItem.comtUserNickname}}</em>
                            </font>
                            <font class="provenanceTiem fontSize22"><em class="color717070">{{commItem.createTime | dateServer}}</em></font>
                        </p>
                    </div>
                    <div class="fontSize28" @click="replyDetail(commItem)" v-if="commItem.bereplyUserNickname">
                        <em class="color00a9e8">回復{{commItem.bereplyUserNickname}}:</em>
                        {{commItem.comtContent}}
                    </div>
                    <div class="fontSize28" @click="replyDetail(commItem)" v-else>
                        {{commItem.comtContent}}
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
import apiCircle from '../../api/circle'
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            swiperHeight:{
                height:document.body.clientHeight + 'px',
                lineHeight:document.body.clientHeight + 'px'
            },
            swiperImg:[],
            marginLeft:{
                marginLeft:'2%'
            },
            marginTop:{
                marginTop:'1%'
            },
            pageNum:1,
            pageSize:10,
            detailCon:'',
            id: this.$route.query.id,
            userId: this.$route.query.userId,
            tab:this.$route.query.tab,
            commentList:[],
            commentsPages:'',
            userImageList:[],
            paddingTop:{
                paddingTop:'.088rem'
            }
        }
    },
    mounted(){
        window.appLoginId = this.appLoginId
        window.commentDetails = this.commentDetails
        window.detail = this.detail
        this.detail()
        this.praiseImage()
        this.commentDetails(1)
        window.addEventListener('scroll',()=>{
            if(window.screen.height + window.pageYOffset > (document.body.scrollHeight-30)){
                if(this.pageNum < this.commentsPages){
                    this.pageNum++
                    this.commentDetails(1)
                }
            }
        })
    },
    methods:{
        //  接受正常登陆之后的userId
        appLoginId(userId){
            this.userId = userId
            this.tab1 = ''
        },
        // 跳转到个人空间
        homeLink(item){
            if(this.$isAndroid){
                window.android.startSpace(window.location.origin + '/h5ext/#/home?userId='+this.userId+'&homeId='+item.pubUserId+'&tab='+this.tab)
            }else if(this.$isiOS){
                window.webkit.messageHandlers.startSpace.postMessage(window.location.origin + '/h5ext/#/home?userId='+this.userId+'&homeId='+item.pubUserId+'&tab='+this.tab)
            }
        },
        // 点击弹出软键盘
        popupKeyboard () {
            if(this.$isAndroid){
                window.android.popupKeyboard()
            }else if(this.$isiOS){
                window.webkit.messageHandlers.popupKeyboard.postMessage('')
            }
        },
        // 跳转登陆
        loginHtml(){
            if(this.$isAndroid){
                window.android.isUserPermissions()
            }else if(this.$isiOS){
                window.webkit.messageHandlers.isUserPermissions.postMessage('')
            }
        },
        // 详情
        detail(){
            let contentImage = []
            let self = this
            apiCircle.enventDetails({dynamicId:self.id,userId:self.userId}).then(data => {
                if(data.body.returnMsg == "success"){
                    if(data.body.data.contentImage){
                        contentImage = data.body.data.contentImage.split(',')
                    }
                    data.body.data.contentImage = contentImage
                    self.detailCon = data.body.data
                    let parmes = {
                        dynamicId:self.id,
                        userId:self.detailCon.pubUserId,
                        userType:self.detailCon.pubUserType
                    }
                    //  回复获取
                    if(self.$isAndroid){
                        window.android.getDynamicDetailID(JSON.stringify(parmes))
                    }else if(self.$isiOS){
                        window.webkit.messageHandlers.getDynamicDetailID.postMessage(JSON.stringify(parmes))
                    }
                }
            })
        },
         // 动态详情页点赞获取人物头像
        praiseImage(){
            apiCircle.praise({id:this.id,userId:this.userId}).then(data => {
                if(data.body.data != null){
                    this.userImageList = data.body.data
                }
            })
        },
        // 评论
        commentDetails(index){
            if(index==2){
                this.pageNum = 1
            }
            let parmes = {pageNum:this.pageNum,pageSize:this.pageSize,dynamicId:this.id}
            apiCircle.commentDetails(parmes).then(data => {
                if(data.body.returnMsg == "success"){
                    this.commentsPages = data.body.data.pages
                    if(index == 1){
                        for(let i = 0; i < data.body.data.list.length; i++){
                            this.commentList.push(data.body.data.list[i])
                        }
                    }else{
                        this.commentList = data.body.data.list
                    }  
                }
            })
        },
        // 点赞
        addPraise(item){
            let parmes = {userId:this.userId,newsId:item.id,newsType:11}
            apiCircle.enventPraise(parmes).then(data => {
                if(data.body.returnMsg == "success"){
                    item.exiPraise = !item.exiPraise
                    item.praiseCount = data.body.data
                    this.praiseImage()
                }
            })
        },
        // 点击动态图片放大
        imgbig(index,contentImage){
            if(this.$isAndroid){
                window.android.getBigImagePaths(index,contentImage.join(','))
            }else if(this.$isiOS){
                let stringImg = index +','+ contentImage.join(',')
                window.webkit.messageHandlers.getBigImagePaths.postMessage(stringImg)
            } 
        },
        //  禁止页面滑动
        stopMove(id){
            let mo=function(e){e.preventDefault();};
            if(id == 1){
                document.body.style.overflow='hidden'
            }else{
                document.body.style.overflow='';//出现滚动条
            }
            document.addEventListener("touchmove",mo,false);
        },
        // 动态评论回复
        replyDetail(item){
            let parmes = {
                dynamicId:this.id,
                userId:this.detailCon.pubUserId,
                userType:this.detailCon.pubUserType,
                bereplyUserId:item.comtUserId,
                bereplyUserType:item.userType,
                nickname:item.comtUserNickname
            }
            if(this.$isAndroid){
                window.android.getReplyMsg(JSON.stringify(parmes))
            }else if(this.$isiOS){
                window.webkit.messageHandlers.getReplyMsg.postMessage(JSON.stringify(parmes))
            }
        },
        // 转发
        forwarding(item){
            if(this.userId == item.pubUserId){
                Toast('您不能转发自己')
                return false
            }
            if(item.dynamicId && item.forwoardUserId && item.forwoardUserType){
                if(this.$isAndroid){
                    window.android.forWard(item.contentImage ? item.contentImage.join(',') : '',item.content,item.forwoardUserId,item.forwoardUserType,item.nickname,item.dynamicId)
                }else if(this.$isiOS){
                    let forWardString = {
                        'imgArray':item.contentImage ? item.contentImage.join(',') : '',
                        'title':item.content,
                        'forwoardUserId':item.forwoardUserId,
                        'forwoardUserType':item.forwoardUserType,
                        'nickname':item.nickname,
                        'dynamicId':item.dynamicId
                    }
                    window.webkit.messageHandlers.forWard.postMessage(JSON.stringify(forWardString))
                }
            }else{
                if(this.$isAndroid){
                    window.android.forWard(item.contentImage ? item.contentImage.join(',') : '',item.content,item.pubUserId,item.pubUserType,item.nickname,item.id)
                }else if(this.$isiOS){
                    let forWardString = {
                        'imgArray':item.contentImage ? item.contentImage.join(',') : '',
                        'title':item.content,
                        'pubUserId':item.pubUserId,
                        'pubUserType':item.pubUserType,
                        'nickname':item.nickname,
                        'dynamicId':item.id
                    }
                    window.webkit.messageHandlers.forWard.postMessage(JSON.stringify(forWardString))
                }
            }
        }
    }
}
</script>
<style scoped>
.mint-swipe-indicators{
    height: .4rem;
}
.nikeName{
    height: .7rem;
    display: block;
    padding-left: .2rem;
}
.pubTypeTwo{
    height: 4rem;
    width: 100%;
    overflow: hidden;
    padding-top: .2rem;
}
.divImgOne{
    height: auto;
}
.divImgOne p{
    height: auto;
}
.detailBottom{
    border-bottom:solid .1rem #cccc;
}
.pDetail{
    width: .6rem;
    height: .6rem;
}
.pOne img{
    height: 100%;
}
.provenanceTiem{
    padding-top: .05rem;
}
[v-cloak] {
 display: none;
}
</style>
